<template>
  <div id="header">


        <div class="left">
            <span class="iconfont icon-zuo"></span>
        </div>
        <div class="center_put">
            <span class="iconfont icon-soushuo"></span>
            <input type="text" placeholder="请输入城市/景点、游玩主题">
        </div>
        <div class="right">
            北京
            <span class="iconfont icon-dowm"></span>
        </div>


  </div>
</template>




<script>
    export default {
        name: 'Header'
    }
</script>




<style lang="stylus"  scoped>
    #header{
        width 100%;
        height .44rem;
        background #00bcd4;
        display:flex;
        align-items center;
        .left{
            font-size .2rem;
            color #fff;
            padding-left .1rem;
            margin-right .1rem;
        }
        .center_put{
            flex 1;
            width 100%;
            height .3rem;
            border-radius:5px;
            line-height .28rem;  
            background #ffffff;
            padding-left .1rem;
            color #cacaca;
            input {
                width 90%;
                line-height .28rem;
                padding-left 2px;
            }
            span {
                vertical-align middle;
                display inline-block;
                line-height .3rem;
                font-size .18rem;
            }
        }
        .right{
            color #ffffff;
            padding-right .1rem;
            margin-left .1rem;
        }
    } 
    
</style>